<!--
 * @Author: your name
 * @Date: 2020-09-01 11:26:12
 * @LastEditTime: 2020-09-07 10:20:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-dialog.vue
-->

<template>
  <CustomDialog v-model:visible="visibleDialog" @confirm="handleOk">
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
      <template v-for="item in menuForm" :key="item.key">
        <a-form-item :label="item.label" v-if="item.key === 'parent_id'">
          <a-tree-select
            v-model:value="data.record[item.key]"
            style="width: 100%"
            :tree-data="treeData"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            showSearch
            search-placeholder="Please select"
            :replaceFields="replaceFields"
            treeNodeFilterProp="title"
          />
        </a-form-item>
        <a-form-item :label="item.label" v-else-if="item.key === 'icon'">
          <SelectIcon v-model:data="data.record[item.key]" />
        </a-form-item>
        <FormItem v-else :data="data.record" :item="item" />
      </template>
    </a-form>
  </CustomDialog>
</template>

<script>
import { computed, getCurrentInstance, ref } from 'vue';
import CustomDialog from '../../components/custom-dialog/index.vue';
import FormItem from '../../components/form-item/index.vue';
import SelectIcon from '../../components/select-icon/index.vue';
export default {
  name: 'MenuDialog',
  components: {
    CustomDialog,
    FormItem,
    SelectIcon
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    let { ctx } = getCurrentInstance();
    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    let menuForm = [
      {
        label: '菜单名称',
        key: 'name',
        type: 1
      },
      {
        label: '后端地址',
        key: 'url',
        type: 1
      },
      {
        label: '父级菜单',
        key: 'parent_id',
        type: 1
      },
      {
        label: '是否隐藏',
        key: 'ishidden',
        type: 3
      },
      {
        label: '前端路由',
        key: 'web_url',
        type: 1
      },
      {
        label: '图标',
        key: 'icon',
        type: 1
      },
      {
        label: '排序',
        key: 'sort',
        type: 2
      }
    ];

    let loading = ref(false);

    async function handleOk() {
      let res = null;
      if (props.data.isAdd) {
        res = await ctx.$fetch.post('/manager.menus/add', props.data.record);
      } else {
        res = await ctx.$fetch.post('/manager.menus/edit', props.data.record);
      }
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
      ctx.$store.dispatch('GET_USERINFO');
    }

    let replaceFields = {
      title: 'name',
      value: 'admin_menu_id',
      key: 'admin_menu_id',
      children: 'child'
    };

    let treeData = computed(() => {
      return [
        {
          name: '顶级菜单',
          admin_menu_id: 0,
          child: []
        },
        ...ctx.$store.state.menu
      ];
    });

    return {
      visibleDialog,
      menuForm,
      handleOk,
      replaceFields,
      treeData,
      loading
    };
  }
};
</script>
